<template>
  <div class="exam-selection">
    <h2>请选择你要刷题的科目（自动从上次刷题记录继续）</h2>
    <div class="button-group">
      <el-button type="primary" @click="handleJavaExam">Java题库</el-button>
      <el-button type="primary" @click="handleCppExam">C题库</el-button>
      <el-button type="primary" @click="handleComputerExam">计算机综合题库</el-button>

      <exam-dialog
        :visible.sync="dialogVisible"
        :question="currentQuestion"
        :userId="userId"
        @update:visible="handleDialogVisibilityChange"
        @next-question="handleNextQuestion" 
      ></exam-dialog>
    </div>
  </div>
</template>
  
  <script>
import store from "@/store";
import { getNowQuestion } from "@/api/brush/online";
import ExamDialog from "@/components/ExamDialog.vue";
export default {
  components: {
    ExamDialog
  },
  data() {
    return {
      dialogVisible: false,
      currentQuestion: null, // 当前显示的题目
      userId: store.state.userId,
      userName: store.state.userName,
      questionType: null
    };
  },
  created() {
      this.userId = this.$store.state.user.id;
      this.userName = this.$store.state.user.name;
      console.log('BrushOnline created: userId =', this.userId, 'userName =', this.userName);
    },
  name: "BrushOnline",
  methods: {
    async handleJavaExam() {
      this.questionType = "java";
      await this.fetchQuestion(this.questionType);
    },
    async handleCppExam() {
      this.questionType = "c";
      await this.fetchQuestion(this.questionType);
    },
    async handleComputerExam() {
      this.questionType = "computer";
      await this.fetchQuestion(this.questionType);
    },

    async fetchQuestion(questionType) {
  if (!this.userId) {
    console.error("userId 未定义或为空");
    return;
  }
  try {
    const response = await getNowQuestion(this.userId, questionType);

    if (response.message && response.message === "您已完成整个java的题库的在线刷题。") {
      this.$alert(response.message, '太棒啦', {
          confirmButtonText: '确定',
        });
          return;
        }
        
    if (response.message && response.message === "您已完成整个c的题库的在线刷题。") {
      this.$alert(response.message, '太棒啦', {
          confirmButtonText: '确定',
        });
          return;
        }
        
    if (response.message && response.message === "您已完成整个computer的题库的在线刷题。") {
      this.$alert(response.message, '太棒啦', {
          confirmButtonText: '确定',
        });
          return;
        }

    this.currentQuestion = {
      questionId: response.questionId,
      questionText: response.questionText,
      optionTextA: 'A.  '+response.optionTextA,
      optionTextB: 'B.  '+response.optionTextB,
      optionTextC: 'C.  '+response.optionTextC,
      optionTextD: 'D.  '+response.optionTextD,
      correctOption: response.correctOption, // 数字形式，保留以备不时之需
      correctAnswer: response.correctAnswer, // 字符形式，如 'A', 'B', 'C', 'D'
      questionType: this.questionType
    };
    this.dialogVisible = true;
  } catch (error) {
    console.error("请求失败:", error);
  }
},
async handleNextQuestion() {
      // 当请求下一题时，重新获取当前类型的问题
      if (this.questionType) {
        await this.fetchQuestion(this.questionType);
      }
    },
    handleDialogVisibilityChange(visible) {
      this.dialogVisible = visible;
    }
  }
};
</script>
  
  <style scoped>
.exam-selection {
  text-align: center;
  margin-top: 50px;
}

.button-group {
  margin-top: 20px;
}

.el-button {
  margin: 0 10px;
}
</style>